<template>
  <div class="device-detail-container">
    <div class="nav-box">
      <van-tabs
        v-model="activeName"
        @change="changeTab"
        ref="vanTabs"
      >
        <van-tab
          title="基本信息"
          name="基本信息"
          v-if="$checkBtnPermission('deviceCenter:deviceManage:list:detail:basicInfo')"
        >
          <BasicInfo />
        </van-tab>
        <van-tab
          title="运行参数"
          name="运行参数"
          v-if="$checkBtnPermission('deviceCenter:deviceManage:detail:runParams')"
        >
          <RunParams />
        </van-tab>
        <van-tab
          title="实时数据"
          name="实时数据"
          v-if="$checkBtnPermission('deviceCenter:deviceManage:detail:realTimeData') && showRealTime"
        >
          <RealTimeData />
        </van-tab>
        <van-tab
          title="视频"
          name="视频"
          v-if="$checkBtnPermission('deviceCenter:deviceManage:detail:video')"
        >
          <VideoList ref="videoComponent" />
        </van-tab>
        <!-- <van-tab
          title="生产效率"
          name="生产效率"
        >
          <Productivity />
        </van-tab> -->
        <van-tab
          title="维修记录"
          name="维修记录"
          v-if="$checkBtnPermission('deviceCenter:deviceManage:detail:repairRecord')"
        >
          <RepairRecord />
        </van-tab>
        <van-tab
          title="保养记录"
          name="保养记录"
          v-if="$checkBtnPermission('deviceCenter:deviceManage:detail:maintainanceRecord')"
        >
          <MaintainanceRecord />
        </van-tab>
        <van-tab
          title="报警通知"
          name="报警通知"
          v-if="$checkBtnPermission('deviceCenter:deviceManage:detail:alarmNotice')"
        >
          <AlarmNotice />
        </van-tab>
        <van-tab
          title="配件信息"
          name="配件信息"
          v-if="$checkBtnPermission('deviceCenter:deviceManage:detail:accessoriesInfo')"
        >
          <AccessoriesInfo />
        </van-tab>
        <van-tab
          title="知识库"
          name="知识库"
          v-if="$checkBtnPermission('deviceCenter:deviceManage:detail:repository')"
        >
          <Repository />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs } from 'vant';
import BasicInfo from './BasicInfo.vue';
import RunParams from './RunParams.vue';
import RealTimeData from './RealTimeData.vue';
import VideoList from './VideoList.vue';
import Productivity from './Productivity.vue';
import RepairRecord from './RepairRecord.vue';
import MaintainanceRecord from './MaintainanceRecord.vue';
import AlarmNotice from './AlarmNotice.vue';
import AccessoriesInfo from './AccessoriesInfo.vue';
import Repository from './Repository.vue';

export default {
  name: 'DeviceDetail',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    BasicInfo,
    RunParams,
    RealTimeData,
    VideoList,
    // Productivity,
    RepairRecord,
    MaintainanceRecord,
    AlarmNotice,
    AccessoriesInfo,
    Repository
  },
  provide() {
    return {
      parent: this
    };
  },
  data() {
    return {
      activeName: '基本信息',
      navData: [
        '基本信息',
        '运行参数',
        '实时数据',
        '视频',
        '生产效率',
        '维修记录',
        '保养记录',
        '报警通知',
        '配件信息',
        '知识库'
      ],
      showRealTime: true,
      socket: ''
    };
  },
  created() {
    this.websocketFn();
  },
  mounted() {
    let deviceDetailTab = localStorage.getItem('deviceDetailTab') || '';
    if (deviceDetailTab) {
      this.$refs.vanTabs.scrollTo(deviceDetailTab);
      localStorage.removeItem('deviceDetailTab');
    }
  },
  methods: {
    // 切换tab
    changeTab() {
      let videoComponent = this.$refs.videoComponent;
      if (videoComponent) {
        // 重置视频项 阻止视频继续播放
        videoComponent.resetVideoItem();
      }
    },
    // websocket
    websocketFn() {
      const WS_URL = `ws://${location.host}/base/iot_websocket/ws/`;
      const token = localStorage.getItem('token');
      this.socket = new WebSocket(WS_URL, [token]);

      this.socket.onopen = res => {
        console.log('onopen');
      };
    }
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.close();
      this.socket = null;
    }
    localStorage.removeItem('deviceDetailTab');
  }
};
</script>

<style lang="scss" scoped>
.device-detail-container {
  width: 100%;
  height: 100%;

  .nav-box {
    width: 100%;
    height: 100%;

    ::v-deep .van-tabs {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;

      .van-tabs__line {
        background-color: var(--color-primary);
      }

      .van-tabs__wrap {
        flex-shrink: 0;
        border-bottom: 1px solid var(--border-color);
      }

      .van-tabs__content {
        flex: 1;
        height: 0;

        .van-tab__pane {
          height: 100%;
        }
      }
    }
  }
}
</style>